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APOSTILA DE INTRODUÇÃO À LINGUAGEM HTML 


HTML significa HyperText Markup Language - Linguagem de Formatação de Hipertexto. 
Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses 
elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da 
linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada 
com uma “barra” (/): 

<etiqueta>...</etiqueta> 

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de 
texto, e assim marcamos onde começa e onde termina o texto com a formatação 
especificada por ela. 

Exemplos de Tags 
<html> - documento 
<head> - cabeçalho 
<title> - título da página 
<body> - corpo do documento 
<h1> a <h6> - define título nos tamanhos 1 a 6 
<P> - novo parágrafo 
<br> - quebra de linha 
<hr> - define uma linha horizontal 
<!--> - define um comentário 

HTML é um recurso muito simples e acessível para a produção de documentos. Não 
existem programas em HTML, pois HTML não é uma linguagem de programação, mas de 
formatação (marcação). Portanto, a rigor não existem "programadores" de HTML. 

EDIÇÃO DE DOCUMENTOS HTML 

Existem Editores HTML chamados WYSIWYG (what you see is what you get - o que você 
vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das 
marcações (pois o resultado final depende do browserl usado para visitar a página). 
Alguns bastante conhecidos são por 

exemplo: FrontPage, Dreamweaver, Mozilla Composer, NVU e Quanta Plus. 


Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o 
Word, e o writer entre outros, permitem a exportação de seus documentos próprios para o 
formato HTML (menu 
Arquivo, Salvar como, Salvar_como Tipo). 

Um documento HTML, normalmente terá extensão .html ou .htm 
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Documento HTML Básico e seus Componentes 

A Estrulura úc um dmiunicnlo HTML aprcscnla os sicgumlcH componentes: 


<HTML> 

<hLHAÍ» <TJ'L'LE> Tiluio do Documento </]1 TLü></HüAD> 

<BODY> 

tc\lu h 

links* ele... 

^JJÜDV> 

</HTM L? 


As etiquetas (tags) HTML não são sensíveis à caixa, ou seja, tanto faz escrever <HTML>, 
<Html>, <html>, <HtMI>, etc. Não tem diferença entre maiúsculas e minúsculas. 

Os documentos se dividem em duas seções principais, que veremos a seguir. 
























<HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, 
define um título, que é mostrado no alto da janela do browser. Exemplo: 

<HEAD> <TITLE> Página do Fulano de Tal </TITLE> </HEAD> 

Todo documento WWW deve ter um título; esse título é referenciado em buscas pela 
rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos 
(Bookmarks), o título da página se torna a âncora de atalho para ela. Por isso é sugerido 
que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como 
"Introdução", por exemplo. O título também é bastante significativo para a listagem de 
uma página nos resultados de pesquisas nos sites de busca da Internet 



Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, 
sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, 
links para outro documentos, imagens, formulários, animações, vídeos, sons e Scripts 
embutidos. 

Atributos de <BODY> 

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o 
fundo das páginas, bem como uma imagem de fundo (marca d’água): 

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" 
VLINK="#rrggbb" BACKGROUND="URL"> 

Onde: 

BGCOLOR: Background Color, ou seja, cor de fundo da página. Quando não é indicada a 
cor de fundo, o browser irá mostrar uma cor padrão, geralmente cinza ou branco. 

TEXT: Cor dos textos da página (padrão: preto). 

LINK: Cor dos links (padrão: azul). 

ALINK: Cor dos links quando acionados, clicados (padrão: vermelho). 

VLINK: Cor dos links depois de visitados (padrão: azul escuro ou roxo). 

Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, 
Green, Blue). 

Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece 
uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos 
preocuparmos com números esdrúxulos tais como #FF80A0. 



Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de 
cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever 
BGCOLOR="BLUE". 

Porém, browsers mais antigos não apresentarão as cores indicadas. 

BACKGROUND: Indica o URL3 da imagem a ser replicada no fundo da página, como 
uma marca d’água. 

Dica: O nome das cores - os 16 nomes de cores aceitos desde a versão 3.2 da HTML são 
estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, 
teal, white, yellow. 

CORES E FONTES 


Cores - As cores são introduzidas através do elemento <FONT>, usando o sistema RGB 
para cores (da mesma forma que vimos para cores de documentos), como mostrado no 
exemplo a seguir: 

<FONT COLOR="red"> Texto </FONT> 

Produzirá na página: a palavra Texto escrita na cor vermelha. 

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita 
através dos atributos de <BODY>. 

Tamanho - Veja a formatação a seguir: 

<FONT SIZE=3> Texto </FONT> 

Produzirá na página: a palavra Texto como o tamanho 3. 

Este comando permite que o autor do documento altere o tamanho das letras em trechos 
específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar 
tamanhos relativos a esse, por exemplo: 

<FONT SIZE=+2> Letra maior </FONT> 

<FONT SIZE=-2> Letra menor </FONT> 

Fontes - Uma evolução que permite a escolha da fonte para os textos, é o atributo FACE: 
<FONT FACE="Arial"> Texto </FONT> 

Produzirá: a palavra Texto com a fonte (tipo de letra) Arial. 

Mais exemplos: 

<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT> 



<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT> 

<FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT> 


TABELA DE CORES PARA LINGUAGEM HTML 


Os 16 nomes de cores aceitos segundo o HTML 3.2 são estes: 


Aqua 

Black 

blue 

fuchsia 

Gray 

Green 

lime 

maroon 

Navy 

Olive 

purple 


Silver 

T G ã 1 

white 

yellow 


Os códigos de cores são estes: 


000033 

000066 

000099 

OOOOCC 

OOOOFF 

003300 

003333 

003366 

003399 

0033CC 

0033FF 

006600 

006633 

006666 

006699 

::CC 00 66FF 

009900 

009933 

009966 

009999 

0099CC 

0099FF 


ooccoo 

OOFFOO 


66CC00 

66FF00 


999900 


99CC00 

99FF00 


FF9900 

FFCC00 

FFFFOO 


00CC33 

00FF33 


00CC66 

00FF66 


00CC99 

00FF99 


00CCCC 

00FFCC 


00CCFF 

OOFFFF 



339933 339966 
33CC00 33CC33 33CC66 
33FF00 33FF33 33FF66 


339999 

33CC99 

33FF99 


3399CC 

33CCCC 

33FFCC 


3399FF 

33CCFF 

33FFFF 


660000 

660033 

660066 

660099 

6600CC 

6600FF 

663300 

663333 

663366 

663399 

6633CC 

6633FF 

666600 

666633 

666666 W&dd&lsW 

6 6 6 6CC 

6 6 6 6FF 


669933 

66CC33 

66FF33 


669966 
66CC66 
6 6FF 6 6 


669999 

66CC99 

66FF99 


66CCCC 

66FFCC 


66CCFF 

66FFFF 


990000 

993300 


990033 

993333 

990066 990099 

993366 993399 


9900CC 9900FF 

9933CC 9933FF 

996600 

1 

996633 

996666 996699 

9966CC 9966FF 


999933 

99CC33 

99FF33 


999966 999999 


99CC66 

99FF66 


99CC99 

99FF99 


9999CC 

99CCCC 

99FFCC 


9999FF 

99CCFF 

99FFFF 


CCOOOO 

|CC0033 

CC0066 

CC0099 

CCOOCC 

CC00FF 

CC3300 

CC3333 

CC33 6 6 

CC3399 

CC33CC 

CC33FF 

CC6600 

I CC6633 

CC 6 6 6 6 

CC6699 

CC66CC 

CC66FF 

CC9900 

CC9933 

CC9966 

BS9 

CC99CC 

CC99FF 

CCCCOO 

CCCC33 

CCCC66 

CCCC99 

cccccc 

CCCCFF 


CCFF00 CCFF33 CCFF66 CCFF99 


FFOOOO FF0033 
FF3300 FF3333 
FF6600 FF6633 


FF9933 

FFCC33 

FFFF33 


FF0066 
FF3366 
FF 6 6 6 6 


FFCC66 

FFFF66 


FF0099 

FF3399 

FF6699 


FFCC99 

FFFF99 


CCFFCC 


FF00CC 

FF33CC 

FF66CC 


FF99CC 

FFFFCC 


CCFFFF 


FFOOFF 

FF33FF 

FF66FF 


FF99FF 

FFCCFF 


FFFFFF 



























CABEÇALHOS 


Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: 

<H1> Este é um cabeçalho de nível 1 </H1> 

<H2> Este é um cabeçalho de nível 2 </H2> 

<H3> Este é um cabeçalho de nível 3 </H3> 

<H4> Este é um cabeçalho de nível 4 </H4> 

<H5> Este é um cabeçalho de nível 5 </H5> 

<H6> Este é um cabeçalho de nível 6 </H6> 

Esses cabeçalhos são mostrados no browser da seguinte forma: 

Este é um cabeçalho de nível 1 

Esle é um cabeçalho de nível 2 

Este c um cabeçalho dc nível 3 

Este c LiEii cabeçalho dc nível 4 

El--|£ é M rn c;i h .çal Imí Uc n ■ üJ 3 
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Alinhamento de cabeçalhos - os cabeçalhos têm atributos de alinhamento: 

<H2 ALIGN=CENTER>Cabeçalho centralizado</H2> 

Cabeçalho centralizado 
<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3> 

Cabeçalho alinhado à direita 
<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default=padrão)</H4> 

Cabeçalho alinhado à esquerda (default=padrão) 

SEPARADORES 

Para organizar os textos, precisamos de separadores, apresentados a seguir. 

Quebra de linha: Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é 
necessário quando queremos uma quebra de linha em determinado ponto, pois os 
browsers já quebram as linhas automaticamente para apresentar os textos. 




Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse 
elemento tem um atributo especial, que será apresentado no item sobre inserção de 
imagens. 


Parágrafos 

Para separar blocos de texto, usamos o elemento <P>, por exemplo: 

Parágrafo 1; <P> Parágrafo 2. 
que produz o seguinte: 

Parágrafo 1; 

Parágrafo2. 

Combinando parágrafos e quebras de linha, temos por exemplo: 

Parágrafo 1 ;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1 ,<P>Parágrafo 2;<br> 
linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2. O resultado da marcação acima é: 

Parágrafo 1; 

linha 1 do parágrafo 1, 

linha 2 do parágrafo 1. 

Parágrafo 2; 

linha 1 do parágrafo 2, 

linha 2 do parágrafo 2. 

<P> tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a 
seguir: 

<P ALIGN=CENTER> Assim como os trens, as boas idéias às vezes chegam com atraso. 
<BR>(Giovani Guareschi) 

Assim como os trens, as boas idéias às vezes chegam com atraso. 

(Giovani Guareschi) 

<P ALIGN=RIGHT>”Como diz o provérbio chinês: “É melhor passar por ignorante uma 

vez do que permanecer ignorante para sempre”.</P> 

Como diz o provérbio chinês: "É melhor passar por ignorante uma 

vez do que permanecer ignorante para sempre". 

<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar 
nenhuma frase especial.</P> 

Este é o alinhamento padrão (default), e por isso não vou colocar 
nenhuma frase especial 

LINHA HORIZONTAL 



<HR> insere uma linha horizontal, como a apresentada abaixo: 


Essa linha tem diversos atributos, oferecendo resultados diversos. 
<HR SIZE=7> insere uma linha de largura 7 (pixels): 


<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal 
disponível: 


<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 
30% (do espaço 

horizontal disponível), alinhada à direita, sem efeito 
tridimensional: 


<HR SIZE=7 0 WIDTH=2 ALIGN=LEFT> insere uma linha de 
(pixels), comprimento 2 (pixels), alinhada à esquerda 
aparentemente, não aceita esta formatação de <HR>): 


largura 70 
(o Netscape, 


Dica: Divisões - outros elementos usados para separar porções de 
texto são o <DIV> e o <CENTER>. <CENTER> centraliza os elementos 
(textos, imagens, tabelas) que estiverem dentro de sua marcação. 
<DIV> marca uma divisão lógica de um documento e é uma formatação 
bastante usada atualmente. 

CARACTERES ESPECIAIS 

HTML permite que caracteres especiais sejam representados por 
seqüências de escape, indicadas por três partes: um & inicial, um 
número ou cadeia de caracteres correspondente ao caractere 
desejado, e um ; final. 

Três caracteres ASCII - <, >, e & têm significados especiais em 

HTML e são usados dentro de documentos seguindo a correspondência: 







Entidudü 

CüructLTE 

Alt; 

< 

iifrl: 

> 


& 


Outras seqüências de escape suportam caracteres ISO Latinl. Aqui 
está uma tabela com os caracteres mais utilizados em Português: 


Entidade 

Caractere 

&:tacutc; 

ã 

& ac i jl' : 

ji 

&agrave; 

ã 

A :il.:l.k\ 

ji 

&cccdil: 

£ 

&c ac u 1 c~ 

ü 

^ l"C L Jl* : 

L" 

&iacuic; 

L 

<£ oae u Lc: 

ti 

Jfcocirc : 

Õ 

intiLdc: 

Ò 

jt uac li tc: 

Ú 

&uuin L: 

ü 


EnLidüdi L 

Caractere 

Ál A ac Lite: 

À 

iÀcirc; 

À 

& À grave : 

À 

AAlilde: 

Á 

AíCccdiL; 

ç 

&Líacilíc: 

J: 

òlücwü: 


lv .1 jl u i c : 

~r 

^Oacute: 

ó 

AOcire; 

ò 

íÜlOi i Ide: 

õ 

Uac Lite: 

u 

ítLuml- 

ü 


Como vemos, as seqüências de escape são sensiveis à caixa. 
Os editores de HTML fazem essa tradução automaticamente. 

ESTRUTURAÇÃO DE TEXTOS - HTML 

Para utilizarmos o editor de texto kwriter temos que abrir a tela 
"executar comando" digite alt + f2 

0 comando a ser digitado é: kwrite 


























































ETAPAS 


I o Abra o Kwrite.. 

2 o Digite o seguinte texto: 

<html> 

Toda página Html deve iniciar com essa tag. 

3 o Digite : 

<head> 

0 cabeçalho deve ser delimitado pelas tags <head> e </head> 

4 o Digite: 

<title> 

Onde deve ficar o titulo da página. 

Feche com </title>. 

Exemplo: 

<title>teste html</title> 

5 o Digite: 

</head> para fechar o cabeçalho da página 
6 o Digite: 

<body> 

Onde ficará o corpo da sua página. 

Depois insira o titulo para o texto. Para isso, use as tags <hl> e 
</hl> 

Exemplo<hl>Minha primeira Home Page</hl> 

0 tamanho vai de <hl> tamanho maior para <h6> tamanho menor. 

7 o Para colocar um texto digite : 

<p>Texto aqui 
Feche com </p> 

Exemplo: 

<p>Páginas Html podem ser criadas em qualquer editor ou 
processador de texto </p> 

8 o Colocando uma imagem : 

Exemplo: 

<img src="brasil.gif" alt=" imagem do Brasil" height=270 

width=240> 

A imagem, com extensão Gif ou Jpg, deve estar na mesma pasta que 
o arquivo Html. Img src é referente a imagem que precisar ser 



indicado sua. Alt é um texto alternativo enquanto a página é 
carregada ou quando se passa com o mouse sobre a figura. 

Height e Width são as dimensões da figura em pixels, modifique a 
seu gosto. Se você não indicar as dimensões da figura, excluindo 
height e width, sua imagem terá o tamanho original. 

9 o Feche o corpo do texto e terminar com a tag de fechamento. 
Exemplo: 

</body> 

</html> 

10° Salve com extensão .html ou .htm . 

Exemplo: 

teste.html ou teste.htm 

Abrindo e vendo o resultado. Abra seu navegador, clique em Arquivo 
/Abrir ou Abrir página/ Procurar . Abra a pasta onde você salvou 
sua página clique no arquivo html de sua página e de Ok. 
Lembrando que para atualizar sua página basta apenas abri- la no 
navegador padrão e clicar em Exibir/ Código de Fonte e fazer as 
modificações necessárias no código do documento Html não 
esquecendo de salva- lo. 

Exemplo completo 


<html> 


<head> 

<title>teste html</title> 


<head> 

<body> 

<hl>Minha primeira Home Page</hl> 

<p>Páginas Html podem ser criadas em qualquer editor ou 
processador de texto </p> 

<img src="brasil.gif" alt="Brasil" height=150 width=120> 


</body> 

</html> 


Tanto as figura como o texto ou mesmo os hyperlinks podem ser alinhados no canto 




esquerdo, direito ou centralizados. 

Como fazer. 

<p align="center">texto alinhado ao centro</p> 

<p align="right">texto alinhado a direita</p> 

Caso você não escolha nenhuma dessas duas tags o alinhamento será automático. 

Para tornar a Home Page mais atraente use as seguintes tags: 

<h1> e <marquee>. Dessa forma seu título vai ser um letreiro que vai passar de um lado 
para outro. Não esqueça de fechar com a tag </marquee> e </h1> 

E <font color="red"> junto a tag </font>. Assim seu texto vai ter a cor vermelha. Vamos 
também centralizar a imagem. E Salvaremos como teste2.htm. 

Com a tag<center>e fechar com a tag </center> 

Exemplo: 

<html> 

<head> 

<title>teste html</title> 

<head> 

<body> 

<h1><marquee>Minha primeira Home Page</marquee></h1> 

<center><font color="red"> Páginas Html podem ser criadas em qualquer editor ou 
processador de texto </font></center> 

<center> 

<img src="brasil.gif" alt="Brasil" height=150 width=120> 

</center> 

</body> 

</html> 

Você pode modificar também o fundo, colocando uma imagem ou uma cor. 

Exemplo<body bgcolor="teal"> para ou 
<body background="fundo2.gif> para imagem. 

Dicas: 

Não é aconselhável usar imagens .bmp ( Bitmap ) por ser bem maior (em KB) que as 
imagens Gif e Jpg. 

Utilize nomes em seus arquivos que tenham algumas normas básicas : 

- Não utilize acentos, nem espaços, nem outros caracteres raros. 

- Também lhe ajudará escrever sempre as letras em minúsculas. 

Isto não quer dizer que se deve fazer nomes de arquivos curtos, é melhor fazê-los 



descritivos para que se possa lembrar o que há dentro. Algum caracter como o traço 
ou o traço baixo (underline)pode ajudar a separar as palavras. 

Por exemplo: homepage_maria 


LISTA NUMERADA E LISTA NÃO NUMERADAS 


U 


% Iísmumerada.hnm I - KWrice 


I Uh 
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j ú w Q ^ ^ 4 ’i tx K R í 

<bod p 

<M> lista mmerada</M> 

<oI> 

<li>arro 2 </li> 

<li>feij ao</Ii> 

<li>carne</li> 

</ol> 

|e/bodf> 

</html> 


HKe://- Hozllla Firáos 


yj 


Aiqiiw Edilar Exibir [r Favcntos Fíiramenlis Ayüa 

§ '1 6) 9 |r U 




lisLn iiimitrudu 

1. itfitü 

2 . feijão 

3. carne 


anaomimieracf^.htm! - KWrrtc 
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3â aa » o «^-'itiKlíW 


<htnl> 

íbody> 

<b 4 > lista nào-nurnerada</h 4 > 
<ul> 

<li>cafe</li> 

dixhá</li> 

<li> leite </li> 

</uL>| 

</body> 


O -< file:" 7 - Mozilla Firefox 
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lis Ui nfiu-mnmmda 

* cate 

* chá 

* teile 


-IH* 






























MozíJla Fiiefos; 


Imagens no HTML 


Sintaxe para definir uma imagem 


Q *■ inseri rjmagem. htm 1 = KWrile 


Arquivo £drror Ver EaYOflíOS Fe-rr^meni; 35 £ofifigurq^ fes Ajuda 

■í F-dÉ J .-3 rM Q ^ ^ l|_4 ür 1 ^ 

<lrody> 

<p> 

Uma inalei:.; 

<inf ?,rr=’ , 1nix.p;if"> 

<fy> 

^/body> 


t ; 

Arquivo Edftar ^er Favoritos Ferramentas Configurações Ajuda 

ti Pí & & 

<body> 

<a href^ht tp: //hvw . yahoo. com .br/> 
target=_blank H >Visife o site Yahoo!</a> 

</bodp 


E 
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Ü fiiei/^fhome/dta^DKkiiop/inserirJmagem.hmri 
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CRIANDO HIPERLINKS 





















Oi que 
aqui 

Referenciar local na 
mesma página 


refereticiarlocaüitiTil - KWrite 
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|’<t â tâ ,'J W O ^ 

<html> 


<body> 

<P> 

href="#C4”>veja também o capitulo 7«/a> 

</p> 

<h2 >C apítit lol< /h2> 
cp>Este é o capitulo l</p> 
<b2>capitulo2</li2> 

^p^este á o capitulo 2s/p> 

<h2>capitulo 3</h2> 

<p>Este è o capitulo 3</p> 

<h2>capitulo 4</h2x/a> 
tp>este é o capitulo 4*/p> 

<h2>capítulo S</h2> 

<p>este é o capítulo 5</p> 

<hl >capitulo 6</h2> 

<p>este é o capitulo 6</p> 
ca namc- 1l C4 M xli2>capitulo 7</h2> 
cp>este é o capitulo ?</p> 
c/body> 

</htnl>| 



flmíwj Ectur EiN- J 1 

4 í3 & 

Èi LNm-is noi'dK Irçtfc ■ 

>lU 1:i■ ii : k i ■ ■ r . |- mi i- 7 

FotfortKt Ee 

í ; -ik mh-rfTH 

■ =■> # 

("apítulol 


FíIl J i:-La|:Hluli:- 1 


capítulo! 


L4k li -.1 LUjlTlukl "1 


eapítu 1 o > 


H1L- -i i: i\ |:i1u!i; i 


capítulo 4 


snt í íi cn^hrh'' * 


capítulo 5 


«nk è -r. rnjihnk. ^ 


capítulo 6 


rrtr A -ri rnphriki * 

CaiilJdü 



*n.. 


capítulo 3 

Eslc c o c upílulo 3 

capítulo 4 

esto é o capítulo 4 

capítulo 5 

este é o capítulo 5 

capítulo 6 

este é o eapítu lo 6 

capítulo 7 

este é o eapítu lo 7 


Concluído 




FRAMES NO HTML 

























li 


vrew-SQurce; - Godígo-forte^ frk:///Jiome/dme/Pa|/iframe,htfnl - Mozilla Frrefax 


Arquivo Editar Exibir 


<html> 

<body> 

cifraflie src=index.htirl></ifrajiie> 

<p>alguns browsers antigos não suportam iframes</p> 

<p>se □ browser não suporta iframes, o frame não será visível</p> 

</body> 


Frame “inline r 




Müiilla Fi reíox 
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^ C^) | LJ fileiyyyhonWdtaje/t^at/iharne.hlrd 
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nlguiii broSVsert anligos nau üLIpurUiilI dkjjzies 

se u browser nau suporta iíiames, o frame nau será visíveJ 












TABELAS 




Moziha Frrtfox 



vicw-so u ncc: - Càdrgo -fonte : m^d taç/Pat/tab lc, htmll ( 
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Arquivo Editar Exibir 


V 1 * ^ ^ © :|J O Ir ia 
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toda tabela começa com a lag lable Toda Linha üa tabcLa começa com a taa Ir 
Toda coluna da tabela começa com a tue td 

unia ILnlin * uma coluna 

100 

iti na linha v Ires cuia nas 


<htnl> 

<body> 

<P> 

toda tabela coneça eoi a tag í.b>table<:/b> 

Toda linha da taírela caneca con a taa <tetr</b> 
Toda coluna da tabela careça toii a tag <b>cd</b> 
</p> 

<h4>una Tinha e una caluna</hda 
ítalíJe bordei"!"> 

<Xr> 

<td>LQ0<yTd> 

</ír> 

</tabl€> 

<à4>una linha e três coluüaa</lri> 

<tablc border 'T"> 


<tr> 


■ ___ 

100 200 300 


«luas linliáse tr€s mvlu nas 


ÍÍÕÕ 200J300 

! 400 Í00 600 

! 


<td^lOõ</td> 

<Ld>2DQ<./líb 

<td>3D0</td> 

</tr> 

</table? 

<bd>duas linhas c tres CDlUfias</b4> 
<table border-"l"> 

<tr> 

<td>L0D</lcL> 

<td>2DD</td> 

<td?3DQ</td> 

</XT> 

<t¥> 

<tâ>4W</tà> 

ítd>500</td> 

<td>6G0í/td> 

</tT> 

c/tabla> 

</bíKly> 

</hlnl> 


Cellpadding - Espaçamento dentro da tabela com cor de fundo 


Arquivo Editar Exibir Ir Favoritos Ferramentas Ajuda 
(p t * ^qr [ file /^ome/dtae^al/cellpadi^g.html 
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rum kTlIparidin^ 


primeira 

Linha 

segunda 

Lrnha 


Arquivo Edita r Ver Eavoritos Ferramentas Configurações Ajuda 

aa - e 

<htib 

íhcdY> 

íM>seti cellpadding</h4> 

□ <tahle border=T' beeolor^red' 1 * 

<tr> 

<td>Priueira</td> 

<td>1inha</td> 

</tr> 

<tr> 

<td>segunda</td> 

<td>1inha</td> 

</tr> 

_ </table> 

<h4> cou c ellpadding: </M> 

□ stable border^T' bgcoLor="blLie" cellpadd:ng= lr 10"> 

<tr> 

<td>pxÍEieirac/tíl> 

<td>linha</td> 

s/tr> 

<tr> 

<td>segimda</td> 

<td>linha</td>| 

</tr> 

_</tahle> 

</hodv> 

</htib 





























CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) 

AS TAGS HTML PARA FORMULÁRIOS E SUA ESTILIZAÇÃO COM CSS 

Os diferentes tipos de formulários que você insere em seu documento HTML são 
apresentados com um formato e cores padrão, que nem sempre estão de acordo com o 
projeto visual da sua página. 

Com uso de CSS você pode alterar a apresentação dos diferentes objetos de formulário. 
As tags HTML para formulários abordadas são as listadas abaixo: 

input; 

select; 

textarea; 

form; 


P Estilo CSS na ta o : nput> 

Abaixo os objetos de formulário do tipo input com sua apresentação (visual) defauit. 

OBJETOS DE FORMULÁRIO 
TIPÜ • INPUT 


0 ■ Botão de opção (radio button) 

□ ■ Caixa de seleção (check box) 

- Campo de texto (text field) 


Enviar 

_j 


- Botão enviar (submit) 


A seguir a folha de estilo incorporada e o código HTML, para os objetos input. 


Disponível em: http://www.maujor.com/tutorial/cssforms.php 








cs&.hlml ’ KWrite 


Arquivo Edrtar Ver Favoritos Ferramentas Configurações Ajuda 

ráaia * 


ja y j «í w v ij h 

<b€ad> 

«style type= M text/css M > 

<! — 
input {, 

b ackg round-color: Mí QEG; t 

fout: 12px verdana, arial, helveiica, sans-serif; 
color;P003399; 
border:2px solid #00305^; 

} 

</style> 

</faead> 

<body> 

<form nane-" fornir' method^poat' 1 action= 1MI > 

<input type="radio” naiie= ! ’radiobutt(m IF 
value^radiobutton 1 ^ 

<fom riaB.e="foTni2 M method= ,l post’ 1 action=”"> 

<input type="checkbox” nane^checkbox" 
value^checkbox 1 '* 

</form> 

<fom ua3i.e-"farm3 M metnod-^ost’ 1 action- 1lir > 

< input tvpe= M text M nane- lh textfield M > 

</form> 

<fom nane= 11 form4 11 rnethüd='’post" açtion= 1MI > 

< input type- ” aubni i 11 n ame=' 1 Subtii t 
value=”Enviar”> 

</fom> 

</body> 

</htnl> 


AqJvo Echai Eybi' |r Favoritos ferramenids Ajuda 

fj* Clie:, , í 1 l tan6'set l PíiSaMI>:ií''tK.tii 
EÚlwwsiwtkias j Ingis ■* Fofluguís ^Dúvifes Flnef* 




aiviar 


CSS Cascading Style Sheets (Folhas de Estilo em Cascata) 


% CSS,CSS- 


Arquivo Editar Ver Favoritos Ferramentas Configurações Ajuda 


j) Êí L 

l^coKJírarir/ 



P 

Bl 

text-align: center; 

/''outro comeíifario*/ 

color :black; 
font-family:arial 

.1 

<head> 

clink rel="stvlesheet" type=”text/css” href="estilos,css7> 
</head> 
































FORMULÁRIO HTML 


% campos th tutoJitml - KWríte 1 D B ^0 
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Moziflá Frrefox 


_ 1 X 


â a a n õ ^ ^ 


A 

....1 

<htnl> 

<body> 

<fom> 

Nome :| 

dnput tjpe="text H na^^nome” > 

<brxbr> 

Sobrenome; 

<input tvpe-^ext" nar.e= "sobrenome 1 ^ 
</foo> 

</body> 

</htiil> 


M 
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Nome: 


Sobrenome: [" 


password.Mml-KWrflfl 


-.:i'X,ár 


Mciílla Firefox 


Ui 
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[j ô a a õ ^ tx u & u 

<bodp 

<fom> 

Logiti: 

íinput type= lp text” naBe= ,l login , V 

<brxbr> 

Sentia: 

ãnput type-^password" nane=' senha 11 > 

<p> 

browser mostra asteriscos 

</p> 

í/body> 

</htmI> 
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ffefflh 


8* B 


♦ •❖■iS©® 
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Logín: | 


Senha: | 

browser mostra asteriscos 






























CAIXAS “CHECKBOX” 




radio.html - KWrile 


1 X á. 


ffloiilhFirefcx 
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J ô 3 lí w O ^ ^ Ei: PI & f\ 

<fom> 

dnput type="radio" nare -"genero 11 value=T>Wasculinc 

íbr> 

dnput type= "radio" na ^-"genero 11 value= 11 F" >Fenin ino 
</fom> 

</btml> 


ÍMxb 


Arquivo Editar Exibir lí Favoritos Ferramentas Ajuda 

^ t - ® 9 © Ij wshH ® lr 5 
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f Masculino 
Feminino 


% 


chttkta.Fitrnf ■ KWnte 


Arquivo Editar Ver Favoritos Fenamentas Configurações Ajuda 

Banam » q ^ 

(cform? 

dnput type - 1 checkbox ' 1 nane^bieleta 11 * 

Eu nâo tenbo una bicicleta 

<br> 

dnput type-^heckbox" nane-” carro” > 

Eu tenbo um carro 
</fom> 


MòEilh Flrdbx 
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♦ * § ' § 9 © IJ teflh H Olr ü 
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T Fu não lenho uma bèkleia 
r Eu tenho um carro 


rix 




























INTRODUÇÃO AO JAVASCRIPT 


JavaScript é o seguinte passo, depois do HTML, que pode dar um programador da web 
que decida melhorar suas páginas e a potência de seus projetos. É uma linguagem de 
programação bastante simples e pensado para fazer as coisas com rapidez, às vezes 
com leveza. 

<html> 

<head> 

<script type=”text/javascript”> 

</script> 

</head> 

</html> 

índice de massa corporal 
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J & cá £1 O lí 4 ££ & & 

€hvú> 

<bead> 

cneta content= M text/htnl; charset=ytf8 M 
t tp- e quiv-" ccm ten t -typ e 11 > 

E. <script type="t«rt/javascript 1 ^ 

functíon testei) 

0. ■ { 




5wwí 




var ime - neu 

|felunbeTC);//cria ura objeto da 
j$ 8 $Kclasse \\mber 

p=docujient. imc »peso k va lue ; 
a=docmient. ijic .altura«value; 
imc-p/(a*a); 
alertC 1 Seu IMC è: 
.;';"+ÍJic.toFixed( 2 ))i üsà V 
Èg&ktaetGdo tolixed ^ara lixar o 
Wí&wwero de casas decima] s 


} 

</script> 


</head> 

íbody* 


^ ' S 1 0> © IU fl |e: i v [ O Ir [|ÇL 
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Peso pz 


Altura 1,60 




<fom name^iBc"*-. 

bsp;&nbsp; <finbsp :<í nput 
text" naite^pesa" 
lQ">«br><br> 

Alturainbsp i^ínput type^text 11 
-- ■- f rdne=”altura 13 size="10 l ><brxbr> 

<input type^button* 1 nase^ok 11 

.■•value= b| Qk |t onclick^testeO 11 ^ 

</forw> 

</body> 

</btnl> 




















INTRODUÇÃO AO PHP 
Php passo a passo - sequencial 


1. Criar formulário - salvar como html (formulário.html) 


omiulario.hlnil - KWrite 
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, Morilla Firelon 
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A Ei lí J w Ô 

|chtnl> 

<head> 

</head> 
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<body> 

<c«iterxh2>Ficha de cadastro de alunos</hZx/c€iiter> 
cfoim action-" dados aluno, php" method="POSr> 

<P>Nojie do aluno: <input type-^texf n.aino- H none"> 
<br>Sobrenone do aluno; <input type= ,l text lp ri^ne= 11 sobrenome ' > 
<br>Série: cinput type^text" tiamc=" serie ”> 

<br>Sexo: <input type-^text" namé- l, s&xo l, > 

<br>Idade: cinput type^text" name^' 1 idade “> 

<br>Escola: dnput type^text" tianie=“escola M > 
cbminput type-"subnit ,l > 

</fonn> 

</bcdy> 


Ficha de cadastro de alunos 


Nome do aluno: | 

Sobrenome do aluno: 

Série: 

Sexo: 

Idade: 

Escola: ["" 

Enviar dados j 

Preencha 

e dique em enviar 
^"-dados 


2. Criar dados - que receberão os itens do formulário e salvá-lo em PHP 
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^ ^ ' & © © .U file:///h Jvj Q| F jQ, 


<htnl> 
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<head> 

í/head> 


<body> 


Dados enviados! 


<centerxh2>Dados enviados! </h2x/centei> 

<?php 

Jdadosarq-' alunos.txt' 1 ; 

3newlitie="\n Nome: 11 , 3_P0SI["nome"] . "\n 
X# Sobrenome: " . OOST "sobrenome"] . "\n Série: " 
W§m. í_P0ST[ "serie"] . "\n Sexo: " . LPOSTTsexo’ 1 ] 
>0M4l- M \» Idade: " . ÍJ0ST[" idade’ 1 ; , "\n Escola: 11 
WM(- t_P0ST[ "escola"] . >\n"; 

3apen=fopen(Idadosarij, 

, 3writ t=fwr itefSopen, Snewline) ; 

?> 

</bcdy> 


c/htmb 


3. Após a criação dos dados php, copiar os arquivos formulario.html e dados.php e colar 
no arquivo do servidor smb://xxx.xxx.x 

4. Abrir o Firefox e digitar o endereço do servidor. 

5. Clicar em formulario.html, preencher e enviar os dados. 

6. Voltar no servidor smb://xxx.xxx.x e clicar em recarregar página. Será criado o 
arquivo.txt 

7. Clicar com o botão direito no arquivo txt, em seguida clicar em “previsualizar em” e 
“componente integrado ao editor de texto.” 


Resultado: 


Aparecerão todos os nomes com os devidos dados que foram preenchidos no formulário. 





















MOZILLA COMPOSER 


Contribuição de : Walkyria Mota Alvarenga - NTE MG 20 - Coronel. Fabriciano 

CRIANDO PÁGINAS WEB COM O “MOZILLA COMPOSER” 

> Mozilla na versão 7.0 possui o Composer 

> O Mozilla Firefox não o contém. 

> O programa é leve apenas 12 megas, porém, dá para fazer uma boa página. 

Abrir a Internet no Mozilla Web Browser(navegador) ou simplesmente "Mozilla”. 

> Menu S ou Menu K 

> Acessórios 

> Comunicação 

> Navegador Mozilla de Internet 

Acessar o Mozilla Composer: (há três formas de acessá-lo): 

> Menu Arquivo Novo - Composer. 

> Menu Janela - Composer. 

> Tecla de Atalho - Ctrl + Shift + N 

> Tecla de Atalho - Ctrl + 4. 

Criando Páginas Web 

> Criar uma pasta na área de trabalho “Desktop” 

> Salvar a pasta com “Tema” da página que estamos criando, para facilitar. 

> Nunca colocar letra maiúscula. 

> Nunca rotular a página com palavras grandes. 

> Nunca escrever caracteres ou símbolos. 

> Se o nome for duplo, automaticamente o Mozilla acrescentará hander line (linha 
abaixo) entre os nomes. 

> Teremos que saber em qual Site iremos hospedar a página: 

Se no http://geocities.com.br, a extensão será “.HTML” ou Defoult (padrão do site). 

> I a página deverá possuir sempre o nome é “INDEX” 

> O próprio Mozilla coloca a extensão “.html” na I a página. Ficará: “index.html”. 

> Salvar como - na pasta criada no Desktop: 

> Nas demais páginas nós teremos que colocar a extensão “HTML” após o nome da 



página. 


Salvar Todos os Arquivos Usados na Página: 

> As imagens, textos e arquivos que serão usados em sua página, deverão ser 
salvos dentro da pasta no Desktop. 

> As imagens deverão ter a extensão “.gif, .jpeg, .jpn ou .bmp”. 

> Ao scannear uma imagem que será usada na WEB, salvá-la sempre entre 72 a 96 
DPI. 

> É bom lembrar sempre, que teremos apenas 15 MG livres, no Geocities, para 
hospedar. 

> Provedores gratuitos: http://br.geocities.yahoo.com ou http://www.hpg.ig.com.br 
Buscando Uma Imagem na WEB 

> Acessamos um buscador. Ex: www.giffs.hpg.ig.com.br - www.gifanimations.com 

www.melhoresgifsanimados.rg3.net - www.criarweb.com - 

www.artifice.web.pt/tutoriais/cntd/tut_html1.html 

> Acessar a imagem prendida. 

> Visualizar imagem do tamanho natural. 

> Menu Arquivo - Salvar como imagem 

> Marcar a opção “Não usar texto substituto” 

> Opção - Abrir 

> Salvar na pasta que contém os arquivos da página que está sendo criada. 

> Observar seus pixels 

> Se a imagem aparecer estourada (cheia de furos - furada) não servirá. 

Criando a I a Página 

> Criar um esboço da página a ser hospedada na WEB em uma folha de rascunho 

> Descrever as tabelas com suas linhas e colunas, textos, links, imagens, todas as 
páginas necessários em seu projeto. 

> Clicar na área de trabalho do Mozilla Composer. 

> Dar enter, até aparecer uma barra de rolagem no canto direito da página. 

> Dar enter até chegarmos a um tamanho razoável para o site. (Uns 30 a 40 cm + ou 
-) 

> Se for necessário, poderemos usar a ferramenta “Posicionamento Absoluto” 

> Clicar na barra de ferramenta no item “Posicionamento Absoluto” 



> Clicar na área de trabalho do Mozilla Composer 


Inserindo Uma Imagem Na Página 

> Menu Inserir - Opção Imagem. 

> Buscar o arquivo na pasta. 

> Inserir dentro de uma tabela. 

> Clicar com o lado direito sobre a imagem. 

> Ir em - Propriedades da Imagem. 

> Guia - Aparência. 

> Opção - Alinhamento do texto. 

> Selecione a melhor posição do texto em relação à imagem. 

> Se for necessário poderemos usar a ferramenta “Posicionamento Absoluto” para 
melhor posicionar a imagem no site. 

Adicionando Um Plano de Fundo 

> Você pode utilizar como plano de fundo da sua página no Mozilla Composer, cores 
ou imagens diversas 

> Menu Formatar 

> Plano de Fundo e Cores - Opção “Usar cores personalizadas” 

> Na janela de diálogo que se abrirá - Você poderá escolher a cor do “Texto” - cor 
do “Link” - cor do “Link Ativo” - cor do “Link Visitado” - cor do “Plano de Fundo” ou 
“Imagem para o Plano de Fundo”. 

Inserido Tabela - São úteis para a organização do texto. 

> Clique no lugar onde queremos inserir a tabela. 

> Barra de ferramenta Tabela - inserir tabela, Ou: 

> Menu Inserir - Tabela. 

> Na caixa de diálogo - escolher o n° de linhas e colunas. 

> Escolher a “Largura” 100- Pontos e não a opção “% da Janela”. 

> Se sem borda digite o Zero. Aparecer uma borda em forma de linha pontilhada e 
vermelha que desaparece ao visualizarmos da página. 

> Inseriremos a tabela programada anteriormente. 

> Para alterarmos as propriedades da tabela. 

> Barra de Ferramenta - Tabela - Propriedades da tabela. 



Adicionar células em uma Tabela: 

> Clique dentro da tabela onde deve ser modificado. 

> Clique em Tabela - Inserir para adicionar 

Deletando uma Célula (linha coluna, célula ou célula vizinha). 

> Selecione linha coluna, célula ou célula vizinha a ser deletada. 

> Para selecionar células individuais - Mantenha pressionada a tecla “Ctrl” e clique 
na célula que você deseja excluir. 

> Menu Tabela - Excluir. 

Mesclando Células: 

> Selecione as células a serem mescladas. 

> Menu Tabela - Combinar células. 

> Mesclando Células à direita à esquerda. 

> Clique na célula situada a direita. 

> Menu Tabela - Combinar célula à direita, (idem à esquerda) 

Dividindo Células: 

> Clique dentro da célula a ser dividida. 

> Menu Tabela - “Dividir Célula” para células mescladas. 

> Para alterar o comportamento - Editar - Preferências - Mozilla Composer - Edição 
de Tabelas - Marcar ou desmarcar a caixa de seleção conforme a preferência. 

> Para maior facilidade na edição, recomenda-se que seja desabilitado a opção 
“Cascading Style Sheets” ( CSS ). 

Convertendo Texto em Tabela. 

> Selecione o texto. 

> Menu Tabela “Criar tabela da seleção” 

Inserindo Linhas Horizontais 

> São usadas para separar diferentes seções de documento. 

> Menu Inserir - Linhas horizontais 

> Clique duplo sobre ela, abrirá uma caixa de diálogo para a sua formatação. 


Criando as Demais Páginas: 



> Arquivo: Salvar Como 

> Formataremos a tabela da maneira que quisermos: borda, sombra, etc. 

> Menu Formatar - Plano de fundo e cores 

> Clicar sobre os quatro quadradinhos, um cada vez, para personalizar as cores. 

> Menu Arquivo - Salvar (Ctrl + S) OBS.: (Ctrl + B é para negritar o texto) 

> Nas demais páginas nós teremos que colocar a extensão “HTML” após o nome da 
página. Menu - Visualizar. 

> Para voltar ao Mozilla Composer, após visualizar a página, basta fechar o 
navegador no “X” canto superior direito da página. 

Criando um LINK Para Outra Página. 

> Selecione um texto ou imagem que servirá para o link. 

> Menu Inserir Link ou Clique no botão Link. 

> Caixa de diálogo “Propriedades de Link” 

> Defina se link 

> Digitar o texto que será o link. 

> Endereço do Link - Digite o endereço da página ou um arquivo de computador ou 
uma âncora para os quais será direcionado o Link. 

> Clique em “Selecione Arquivo”. 

> Para páginas remotas pode-se digitar o endereço da URL da página no campo de 
endereços do navegador. (Ou copiar e colar a URL da página). 

Criando LINKS Dentro da Mesma Página.- deve-se criar uma “Âncora”. 

> Clique em um ponto, no início da linha, onde deverá inserir a âncora ou selecione 
uma palavra/texto. 

> Menu Inserir-Âncora Nomeada 

> Caixa de diálogo “Propriedades da Âncora”. 

> Insira um único nome para âncora no campo “nome da âncora” - OK 

> Um ícone de âncora aparecerá em seu documento marcando a sua localização. 

Criando um LINK Para Ir Para a Âncora 

> Selecione um texto ou imagem que se deseja linkar para a Âncora. 

> Menu Inserir - LINK (ou no botão link) 

> Caixa de diálogo “Propriedades do LINK” será iniciada. 

> Se o LINK for para uma âncora nomeada - selecione a âncora disponível na 



página. 

> Se o LINK for para um arquivo em seu computador em HTML - Basta procurar o 
arquivo em “Selecionar arquivo” e localiza-lo. 

> Se o LINK for para um título nivelado, ex: Título 6, selecione o título nivelado - OK. 

Renomeando A Página Para Que Não Aparece O Rótulo “Index” No Navegador De 
Internet 

> Abrir o arquivo “index”. 

> Menu formatar. 

> Propriedades da página. 

> Entre com o título correto para sua página. 

> O título que você digitar aparecer na barra de títulos da janela do navegador 
OBS.: 

> Você poderá ir até a guia do Mozilla Composer “<html> Código Fonte” 

> Procurar na escrita HTML a TAG <Title> index </Title> 

> Deletar a palavra “index” 

> Renomear, colocando um título que irá aparecer na barra de título de seu 
navegador de Internet. 

> Salvar - Voltar à guia “Normal” 

Navegando Entre as Páginas Criadas, os arquivos de texto, imagens etc... 

> Abrir todos os arquivos que serão usados. 

> Usar o atalho “Ctrl + E”. 

> Copiar os textos digitados e inserir as imagens programadas. 

Formatando Textos (Após digitados) 

> Barra de Ferramenta - Formatar 

> Normal - Aplica a formatação padrão 

> Parágrafo: Insere uma “tag” de parágrafo - O parágrafo inclui margens superiores e 
inferiores. 

> Título 1 - Título 6: formata o parágrafo como título - Título 1: é título maior - Título 
6: é título menor. 

Formatando Textos Como Título. 

> Clique em qualquer posição do texto o qual deseja formatar. 



> Menu “Formatar” > “Par[agrafo”, escolha o tamanho do título que desejar. 

EX: Título 1 para o título principal e Título 2 para o nível abaixo. 

Formatando Listas: 

> Menu “Formatar” - “Listas” 

> Escolha o estilo de lista. 

> Com marcador. 

> Numeradas. 

Alinhando Listas ou Parágrafos. 

> Menu Formatar - Alinhamento - Opção Alinhamento 

OBS.: Se você quiser que alguma palavra de sua página se movimente 

> Acessar a guia “<html> Código Fonte” 

> Procurar a palavra que deseja movimentar 

> Escrever antes dela a TAG <marquee> e depois da palavra </marquee> 

> Salvar 

> Voltar à guia “Nomal” do Mozilla Composer - Visualizar 

Inserindo LINK um para um endereço de e-mail - MAIS SIMPLES 

> Digite o endereço de e-mail e selecione- 0 

> Menu Editar - Copiar. 

> Ainda com o endereço e-mail e selecionado. 

> Menu Inserir- Opção LINK 

> Na janela que se abrirá. 

> A janela “Texto do Link” já estará preenchido. 

> Na janela “Endereço do Link” - digitar “mailto: endereço de e-mail” - Ex: 
mailto:jlima@ig.com.br. 

> OK - OBS não dar espaço entre “mailto” e o e-mail. 

Informações Retiradas: 

> Tutorial “Criando Páginas na Web com Mozilla Composer” - UFMG - Baixado da 
Internet. 

> Apostila “INTEL EDUCAÇÃO PARA O FUTURO” 

> Anotações durante o Curso da SEE/MG no período 29/05 à 09/06/06 - BH 


Você pode dar um clique duplo na lista para abrir a 
_caixa de diálogo “Propriedade da lista”_ 





